<template>
    <div id="map_main"></div>
</template>
  
<script>

import * as echarts from "echarts";

export default {
    name: "mapindex",
    data() {
        return {}
    },
    mounted() {
        this.drawMapLine()
    },
    methods: {
        drawMapLine() {
            var myChart = echarts.init(document.getElementById('map_main'))
            // 经纬度数据
            const seriesList = [
                {
                    data: [
                        {
                            name: '阳澄湖',
                            value: [120.7969443, 31.4297357]
                        },
                        {
                            name: '阳澄半岛莲花堤',
                            value: [120.7968005, 31.3990415]
                        }
                    ]
                },
                {
                    data: [
                        {
                            name: '苏州市人民政府',
                            value: [120.5924899, 31.3048000]
                        }
                    ]
                },
                {
                    data: [
                        {
                            name: '太湖',
                            value: [120.1698552, 31.2365265]
                        }
                    ]
                }
            ];
            // 图标
            const series = seriesList.map(v => {
                return {
                    type: "scatter", //配置显示方式为用户自定义
                    coordinateSystem: "geo",
                    data: v.data
                };
            });
            var option = {
                //提示框组件(可以设置在多种地方)       
                tooltip: {        // 提示框组件
                    show: true,     // 显示提示框组件
                    trigger: "item",     // 触发类型
                    triggerOn: "mousemove",  // 出发条件
                    formatter: "名称:{b}<br/>坐标:{c}"
                },
                series,  // 数据
                geo: {
                    type: 'map',
                    zoom: 1.2, //设置初始化的缩放比例
                    label: {
                        show: false,
                    },
                    roam: true, //禁止其放大缩小
                },

            }
            const appData = require('../../static/suzhoushi.json')  //本地json路径
            echarts.registerMap('suzhoushi', appData) //注册
            option.geo.map = 'suzhoushi'
            myChart.setOption(option)
            
            var bMap = myChart.getModel().getComponent('bmap').getBMap();
            bMap.addControl(new BMap.MapTypeControl({
                mapTypes: [
                    BMAP_SATELLITE_MAP,
                    BMAP_NORMAL_MAP
                ]
    }));
    bMap.setMapType(BMAP_HYBRID_MAP);
        }

    },
};
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
#map_main {
    width: 90%;
    height: 1000px;
    border: 1px solid red;
}
</style>
  